<template>
  <div class="goodsview">
    <ul>
      <li
        v-for="i in item"
        :key="i.id"
        @click="$router.push('/detail?id=' + i.id)"
      >
        <a href="javascript:;">
          <img src="" alt="" v-lazy="i.picture" />
          <p class="name">{{ i.name }}</p>
          <p class="desc">{{ i.desc }}</p>
          <p class="price">
            <i>¥</i>
            {{ i.price }}
          </p>
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ["item"],
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/mixin.scss";
.goodsview {
  width: 100%;
  ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 65px 30px;
    li {
      a {
        display: block;
        width: 220px;
        padding: 20px 30px;
        text-align: center;
        img {
          width: 160px;
          height: 160px;
        }
        .name {
          font-size: 16px;
          padding-top: 10px;
          width: 160px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .desc {
          color: #999;
          height: 29px;
          padding-top: 10px;
          width: 160px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .price {
          color: #cf4444;
          font-size: 20px;
          padding-top: 10px;
        }
      }
    }
    li {
      @include hoverShadow();
    }
  }
}
</style>